<template>

         
        <div class="good_info">
        <transition
   		  @before-enter="beforeEnter"
   		  @enter="enter"
   		  @after-enter="afterEnter">
   		  <div class="ball" v-show="flag" ref="ballname"></div>
   		</transition>

          


              <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						 <swiper :fullwith='false'></swiper>
					</div>
				</div>
			</div>


            <div class="mui-card">
				<div class="mui-card-header">南门断桥雨季，白马寄青衣</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>
                            市场价:<span class="old">$2688</span>
                            销售价:<span>$2199</span>
                        </p>

                        <p> 
                         商品数量   <numberbox @func='getNumber'  :maxnum = 'maxNumber'></numberbox>
                        </p>


                        <p>
                   <mt-button type="primary" size="small">立即购买</mt-button>
                   <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
                   <!-- 分析： 如何实现加入购物车时候，拿到 选择的数量 -->
                   <!-- 1. 经过分析发现： 按钮属于 goodsinfo 页面， 数字 属于 numberbox 组件 -->
                   <!-- 2. 由于涉及到了父子组件的嵌套了，所以，无法直接在 goodsinfo 页面zhong 中获取到 选中的商品数量值-->
                   <!-- 3. 怎么解决这个问题：涉及到了 子组件向父组件传值了（事件调用机制） -->
                   <!-- 4. 事件调用的本质： 父向子传递方法，子调用这个方法， 同时把 数据当作参数 传递给这个方法 -->
                 </p>


		        	</div>
		        </div>

			</div>



            <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号:8521479630</p>
                        <p>库存情况</p>
                        <p>上架时间:2015-5-25</p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <mt-button type="primary" size="large" plain @click="goDesc(imgid)">图文介绍</mt-button>
                    <mt-button type="danger" size="large" plain @click="goComment(imgid)">商品评论</mt-button>
                    </div>
			</div>
        </div>



</template>



<script>
import swiper from '../subcomponents/swiper.vue'
import numberbox from '../subcomponents/numberbox.vue'
export default {
         data:function() {
            return{
               flag: false,
               imgid:this.$route.params.id,
               selectNumber:1,
           }    
        },

        created() {
            this.getMaxNumber()
        },

        methods: {

            getMaxNumber() {
                    setTimeout(function() {
                        this.maxNumber = 30
                    },1)
            },

            getNumber(number) {
                // console.log( number)
                this.selectNumber = number
            },

            addToShopCar() {
            
               this.flag = !this.flag; 

            },

            goDesc (index) {
                     this.$router.push({ name: "goodsdesc", params: { index } }); 
            },
            goComment(index) {
                    this.$router.push({ name: "goodscomment", params: { index } }); 
            },

            beforeEnter(el){
   		      // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
   		      // 设置小球开始动画之前的，起始位置
                  el.style.transform = "translate(0, 0)"
            // 获取小球的 在页面中的位置
             

   		    },
   		    enter(el, done){
   		      // 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
   		      // 可以认为 el.offsetWidth 会强制动画刷新
   		       el.offsetWidth
               const ballPosition =   this.$refs.ballname.getBoundingClientRect();
               console.log(ballPosition)

               //获取徽章的地址
              const badgePostion =  document.getElementById('badge').getBoundingClientRect();

              const xDist =    badgePostion.left - ballPosition.left;
              const yDist =    badgePostion.top - ballPosition.top;

              el.style.transform = `translate(${xDist}px, ${yDist}px)`;
   		      el.style.transition = 'all 1s cubic-bezier(.4,-0.3,1,.68)'


   		      done()
   		    },
   		    afterEnter(el){
   		      // 动画完成之后，会调用 afterEnter
   		      // console.log('ok')
   		      this.flag = !this.flag
   		    }
          },
          components: {
           swiper,
           numberbox
        }
     
}
</script>


<style lang="less" scoped>
   
        .good_info {
            background-color: #eee;
            overflow: hidden;


            .mui-card-header {
                  font-size: 15px;
                }

                .old {
                    text-decoration: line-through;
                }
                p {
                    font-size: 13px;
                }
        }

        .ball {
            background-color: red;
            height: 15px;
            width: 15px;
            position:absolute;
            z-index: 99;
            top: 390px;
            left: 140px;
            border-radius: 50%;
        }

</style>



   